<template>
	<view class="quiz-container">
		<view class="quiz-header">
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="title">饮食知识问答</view>
			<view class="placeholder"></view>
		</view>
		
		<!-- 游戏开始页面 -->
		<view class="start-page" v-if="gameState === 'start'">
			<image src="/static/images/placeholder.png" mode="aspectFit" class="start-image"></image>
			<view class="start-title">饮食知识问答挑战</view>
			<view class="start-desc">测试你的饮食知识，赢取健康积分</view>
			<view class="rules">
				<view class="rules-title">游戏规则</view>
				<view class="rule-item">1. 共5道糖尿病饮食相关知识题</view>
				<view class="rule-item">2. 每题有4个选项，选择你认为正确的答案</view>
				<view class="rule-item">3. 答对一题得5分，满分25分</view>
				<view class="rule-item">4. 答题完成后可查看解析</view>
			</view>
			<button class="start-btn" @tap="startGame">开始答题</button>
		</view>
		
		<!-- 答题页面 -->
		<view class="question-page" v-else-if="gameState === 'playing'">
			<view class="progress-bar">
				<view class="progress-inner" :style="{ width: `${(currentQuestionIndex + 1) / questions.length * 100}%` }"></view>
			</view>
			<view class="question-count">{{currentQuestionIndex + 1}}/{{questions.length}}</view>
			
			<view class="question-card">
				<view class="question-text">{{currentQuestion.question}}</view>
				<view class="options-list">
					<view 
						class="option-item" 
						v-for="(option, index) in currentQuestion.options" 
						:key="index"
						:class="{ 
							selected: selectedOption === index,
							correct: showResult && currentQuestion.answer === index,
							wrong: showResult && selectedOption === index && selectedOption !== currentQuestion.answer
						}"
						@tap="selectOption(index)"
					>
						<view class="option-index">{{['A', 'B', 'C', 'D'][index]}}</view>
						<view class="option-text">{{option}}</view>
					</view>
				</view>
				
				<view class="explanation" v-if="showResult">
					<view class="explanation-title">解析</view>
					<view class="explanation-content">{{currentQuestion.explanation}}</view>
				</view>
			</view>
			
			<view class="action-btns">
				<button 
					class="action-btn" 
					:class="{ disabled: selectedOption === -1 }"
					@tap="confirmAnswer" 
					v-if="!showResult"
				>
					确认答案
				</button>
				<button class="action-btn" @tap="nextQuestion" v-else>
					{{ isLastQuestion ? '查看结果' : '下一题' }}
				</button>
			</view>
		</view>
		
		<!-- 结果页面 -->
		<view class="result-page" v-else-if="gameState === 'end'">
			<image src="/static/images/placeholder.png" mode="aspectFit" class="result-image"></image>
			<view class="result-title">答题完成！</view>
			<view class="result-score">得分: {{score}}/{{questions.length * 5}}</view>
			
			<view class="result-stats">
				<view class="stat-item">
					<view class="stat-value">{{correctCount}}</view>
					<view class="stat-label">答对题数</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{questions.length - correctCount}}</view>
					<view class="stat-label">答错题数</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{Math.round(correctCount / questions.length * 100)}}%</view>
					<view class="stat-label">正确率</view>
				</view>
			</view>
			
			<view class="result-feedback">
				<view class="feedback-title">{{getFeedbackTitle()}}</view>
				<view class="feedback-content">{{getFeedbackContent()}}</view>
			</view>
			
			<view class="reward-info" v-if="rewardPoints > 0">
				<view class="reward-text">获得 {{rewardPoints}} 健康积分</view>
				<view class="reward-total">当前总积分: {{totalPoints}}</view>
			</view>
			
			<view class="action-btns">
				<button class="action-btn" @tap="restartGame">再玩一次</button>
				<button class="action-btn secondary" @tap="goBack">返回</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { getDietQuizQuestions, submitQuizScore } from '@/common/api/diet.js'
	
	// 游戏状态：start(开始), playing(答题中), end(结束)
	const gameState = ref('start')
	// 问题列表
	const questions = ref([])
	// 当前问题索引
	const currentQuestionIndex = ref(0)
	// 选中的选项
	const selectedOption = ref(-1)
	// 是否显示结果
	const showResult = ref(false)
	// 答对的题目数量
	const correctCount = ref(0)
	// 得分
	const score = ref(0)
	// 奖励积分
	const rewardPoints = ref(0)
	// 总积分
	const totalPoints = ref(0)
	
	// 当前问题
	const currentQuestion = computed(() => {
		if (questions.value.length === 0) return {}
		return questions.value[currentQuestionIndex.value]
	})
	
	// 是否为最后一题
	const isLastQuestion = computed(() => {
		return currentQuestionIndex.value === questions.value.length - 1
	})
	
	// 获取问题数据
	onMounted(async () => {
		try {
			uni.showLoading({
				title: '加载中...'
			})
			
			const res = await getDietQuizQuestions()
			
			if (res.code === 0) {
				questions.value = res.data
			} else {
				uni.showToast({
					title: res.message || '加载失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('加载问题失败:', e)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	})
	
	// 开始游戏
	const startGame = () => {
		gameState.value = 'playing'
		currentQuestionIndex.value = 0
		selectedOption.value = -1
		showResult.value = false
		correctCount.value = 0
		score.value = 0
	}
	
	// 选择选项
	const selectOption = (index) => {
		if (showResult.value) return
		selectedOption.value = index
	}
	
	// 确认答案
	const confirmAnswer = () => {
		if (selectedOption.value === -1) return
		
		showResult.value = true
		
		// 判断是否答对
		if (selectedOption.value === currentQuestion.value.answer) {
			correctCount.value++
			score.value += 5
		}
	}
	
	// 下一题
	const nextQuestion = () => {
		if (isLastQuestion.value) {
			// 最后一题，提交成绩并显示结果页
			submitResult()
		} else {
			// 进入下一题
			currentQuestionIndex.value++
			selectedOption.value = -1
			showResult.value = false
		}
	}
	
	// 提交结果
	const submitResult = async () => {
		try {
			uni.showLoading({
				title: '提交中...'
			})
			
			const res = await submitQuizScore({
				score: correctCount.value,
				totalQuestions: questions.value.length
			})
			
			if (res.code === 0) {
				rewardPoints.value = res.data.points
				totalPoints.value = res.data.totalPoints
				gameState.value = 'end'
			} else {
				uni.showToast({
					title: res.message || '提交失败',
					icon: 'none'
				})
			}
		} catch (e) {
			console.error('提交得分失败:', e)
			uni.showToast({
				title: '提交失败',
				icon: 'none'
			})
		} finally {
			uni.hideLoading()
		}
	}
	
	// 重新开始游戏
	const restartGame = () => {
		gameState.value = 'start'
	}
	
	// 获取反馈标题
	const getFeedbackTitle = () => {
		const percent = correctCount.value / questions.value.length
		
		if (percent === 1) {
			return '太棒了！满分！'
		} else if (percent >= 0.8) {
			return '很好！'
		} else if (percent >= 0.6) {
			return '不错！'
		} else if (percent >= 0.4) {
			return '继续加油！'
		} else {
			return '需要更多学习'
		}
	}
	
	// 获取反馈内容
	const getFeedbackContent = () => {
		const percent = correctCount.value / questions.value.length
		
		if (percent === 1) {
			return '你对糖尿病饮食知识非常了解，请继续保持！'
		} else if (percent >= 0.8) {
			return '你对糖尿病饮食知识掌握得很好，还有少量知识点需要巩固。'
		} else if (percent >= 0.6) {
			return '你已经掌握了大部分糖尿病饮食知识，继续学习可以更全面。'
		} else if (percent >= 0.4) {
			return '你对糖尿病饮食知识有一定了解，但还需要更多学习。'
		} else {
			return '建议你多了解一些糖尿病饮食相关知识，对健康管理很有帮助。'
		}
	}
	
	// 返回上一页
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.quiz-container {
		min-height: 100vh;
		background-color: #f5f7fa;
		
		.quiz-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 100;
			
			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.icon-back {
					font-size: 36rpx;
					color: #333;
				}
			}
			
			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}
			
			.placeholder {
				width: 60rpx;
			}
		}
		
		.start-page {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.start-image {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 30rpx;
			}
			
			.start-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.start-desc {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 40rpx;
			}
			
			.rules {
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 40rpx;
				
				.rules-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.rule-item {
					font-size: 28rpx;
					color: #666;
					margin-bottom: 10rpx;
					line-height: 1.5;
					
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			
			.start-btn {
				width: 80%;
				height: 90rpx;
				background-color: #8cc9a1;
				color: #fff;
				font-size: 32rpx;
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		
		.question-page {
			padding: 30rpx;
			
			.progress-bar {
				width: 100%;
				height: 10rpx;
				background-color: #e0e0e0;
				border-radius: 5rpx;
				margin-bottom: 10rpx;
				overflow: hidden;
				
				.progress-inner {
					height: 100%;
					background-color: #8cc9a1;
					border-radius: 5rpx;
					transition: width 0.3s;
				}
			}
			
			.question-count {
				text-align: right;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 20rpx;
			}
			
			.question-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.question-text {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 30rpx;
					line-height: 1.5;
				}
				
				.options-list {
					.option-item {
						display: flex;
						align-items: center;
						padding: 20rpx;
						background-color: #f8f8f8;
						border-radius: 8rpx;
						margin-bottom: 20rpx;
						border: 2rpx solid transparent;
						
						&:last-child {
							margin-bottom: 0;
						}
						
						&.selected {
							border-color: #8cc9a1;
							background-color: rgba(140, 201, 161, 0.1);
						}
						
						&.correct {
							border-color: #4caf50;
							background-color: rgba(76, 175, 80, 0.1);
						}
						
						&.wrong {
							border-color: #f44336;
							background-color: rgba(244, 67, 54, 0.1);
						}
						
						.option-index {
							width: 60rpx;
							height: 60rpx;
							background-color: #fff;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28rpx;
							color: #666;
							margin-right: 20rpx;
							border: 2rpx solid #e0e0e0;
							
							.selected & {
								background-color: #8cc9a1;
								color: #fff;
								border-color: #8cc9a1;
							}
							
							.correct & {
								background-color: #4caf50;
								color: #fff;
								border-color: #4caf50;
							}
							
							.wrong & {
								background-color: #f44336;
								color: #fff;
								border-color: #f44336;
							}
						}
						
						.option-text {
							flex: 1;
							font-size: 28rpx;
							color: #333;
							line-height: 1.5;
						}
					}
				}
				
				.explanation {
					margin-top: 30rpx;
					padding-top: 20rpx;
					border-top: 1px solid #f0f0f0;
					
					.explanation-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 10rpx;
					}
					
					.explanation-content {
						font-size: 28rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}
			
			.action-btns {
				display: flex;
				justify-content: center;
				
				.action-btn {
					width: 80%;
					height: 90rpx;
					background-color: #8cc9a1;
					color: #fff;
					font-size: 32rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.disabled {
						background-color: #ccc;
						color: #fff;
					}
				}
			}
		}
		
		.result-page {
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.result-image {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
			
			.result-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.result-score {
				font-size: 48rpx;
				font-weight: bold;
				color: #8cc9a1;
				margin-bottom: 30rpx;
			}
			
			.result-stats {
				width: 100%;
				display: flex;
				justify-content: space-around;
				margin-bottom: 30rpx;
				
				.stat-item {
					text-align: center;
					
					.stat-value {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 5rpx;
					}
					
					.stat-label {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
			
			.result-feedback {
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.feedback-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.feedback-content {
					font-size: 28rpx;
					color: #666;
					line-height: 1.5;
				}
			}
			
			.reward-info {
				width: 100%;
				background-color: #fff8e1;
				border-radius: 12rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				text-align: center;
				
				.reward-text {
					font-size: 28rpx;
					font-weight: bold;
					color: #ff9800;
					margin-bottom: 5rpx;
				}
				
				.reward-total {
					font-size: 24rpx;
					color: #666;
				}
			}
			
			.action-btns {
				width: 100%;
				display: flex;
				justify-content: space-between;
				
				.action-btn {
					width: 48%;
					height: 90rpx;
					background-color: #8cc9a1;
					color: #fff;
					font-size: 32rpx;
					border-radius: 45rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.secondary {
						background-color: #f5f5f5;
						color: #666;
					}
				}
			}
		}
	}
</style> 